<template>
  <div class="orderTest-container">
    <div class="wrap">
      <div class="logo">
        <router-link to="/">
          <img src="@/assets/logo.png" id="logo" alt="" />
        </router-link>
      </div>
      <div class="nav-wrap">
        <router-link v-for="nav in navs" :key="nav.name" :to="nav.url">
          <div class="hidden-xs-only nav">
            {{ nav.name }}
          </div>
        </router-link>
        <div class="hiddenBtn hidden-sm-and-up">
          <!-- <div class="btn"><my-button showBg>聊一聊</my-button></div> -->
          <div class="tabBar" @click="handleChangeMean" ref="tabBar">
            <span></span>
            <span></span>
            <span></span>
          </div>
        </div>
      </div>
    </div>
    <div class="menuList hidden-sm-and-up" ref="menuList">
      <div v-for="nav in navs" :key="nav.name" class="menu">
        <router-link :to="nav.url" @click.native="handleChangeMean">
          {{ nav.name }}
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: "MyHeader",
    components: {},
    data() {
      return {
        showMenu: false,
        navs: [
          {
            name: "主页",
            url: "/",
          },
          {
            name: "关于",
            url: "/about",
          },
          {
            name: "作品",
            url: "/works",
          },
          {
            name: "博客",
            url: "/blog",
          },
          {
            name: "联系",
            url: "/contact",
          },
        ],
      };
    },
    created() {},
    mounted() {},
    computed: {},
    watch: {},
    methods: {
      handleChangeMean(e) {
        this.showMenu = !this.showMenu;
        console.log(this.$refs.tabBar.children);
        let spans = this.$refs.tabBar.children;
        if (this.showMenu) {
          spans[0].classList.add("anima1");
          spans[1].style.display = "none";
          spans[2].classList.add("anima2");
          this.$refs.menuList.style.height = "220px";
        } else {
          spans[0].classList.remove("anima1");
          spans[1].style.display = "inline-block";
          spans[2].classList.remove("anima2");
          this.$refs.menuList.style.height = "0";
        }
      },
    },
  };
</script>
<style lang="scss" scoped>
  .wrap {
    padding-top: 20px;
    @include flex;
    justify-content: space-between;
    .logo {
      width: 10%;
      cursor: pointer;
      @include flex;
      flex-direction: column;
      justify-content: center;
      img {
        width: 100%;
      }
    }
    .nav-wrap {
      width: 50%;
      @include flex;
      justify-content: space-around;
      .nav {
        cursor: pointer;
        padding: 20px 30px;
        @include flex;
        flex-direction: column;
        justify-content: center;
        transition: 0.5s;
        color: #fff;
        &:hover {
          a {
            transition: 0.5s;
            color: $hoverColor;
          }
        }
      }
      .hiddenBtn {
        @include flex;
        align-items: center;
        .btn {
          @include flex;
          flex-direction: column;
          justify-content: center;
        }
        .tabBar {
          margin-left: 15px;
          width: 50px;
          height: 50px;
          padding: 0 10px;
          box-sizing: border-box;
          border: 1px solid $hoverColor;
          cursor: pointer;
          @include flex-column-center;
          span:first-child {
            margin-top: 0;
          }
          span {
            transition: 0.3s;
            height: 2px;
            margin-top: 6px;
            box-sizing: border-box;
            background-color: $hoverColor;
          }
        }
      }
    }
  }
  @media screen and (max-width: 1440px) {
    .wrap {
      .logo {
        width: 10%;
      }
      .nav-wrap {
        width: 60%;
        .nav {
          padding: 10px;
        }
      }
    }
  }
  @media screen and (max-width: 768px) {
    .wrap {
      .logo {
        width: 20%;
      }
      .nav-wrap {
        justify-content: flex-end;
      }
    }
  }
  @media screen and (max-width: 414px) {
    .wrap {
      .nav-wrap {
        .hiddenBtn {
          .tabBar {
            width: 30px;
            height: 30px;
            padding: 0 5px;
            span {
              margin-top: 4px;
            }
          }
        }
      }
    }
  }
  .menuList {
    color: #fff;
    position: absolute;
    left: 0;
    width: 100%;
    height: 0;
    margin-top: 10px;
    background-color: #2c2f52;
    z-index: 999999;
    overflow: hidden;
    transition: 0.5s;
    box-sizing: border-box;
    .menu {
      a {
        box-sizing: border-box;
        padding: 12px 5%;
        display: block;
        border-top: 1px solid rgba(255, 255, 255, 0.5);
      }
    }
  }
  .anima1 {
    transform: rotate(45deg) translateX(3px) translateY(3px);
  }
  .anima2 {
    transform: rotate(135deg) translateX(-1px) translateY(2px);
  }
</style>
